<template>
  <div class="com-container makeUpEcharts he">
    <div class="com-chart" ref="echarts"></div>

    <!-- <span v-if="totalPage>1" class="page">第 {{currentPage}}页</span> -->
    <!-- <div v-if="p1>1" class="pagesT">
      <span class="page" v-for="(item,index) in p1" :key="index">
        <i :style="{color:index+1==currentPage?'#4c8cc9':'#c9c9c9'}">第{{index+1}}页</i>
      </span>
    </div>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ["termWorkAgeCount"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      //   x轴数据
      xData: null,
      currentPage: 1, //当前显示页数
      totalPage: 0, // 共有多少页
      timerId: null, // 定时器标识
      p1: 0,
    };
  },
  watch: {
    //监听value的变化，进行相应的操作即可
    termWorkAgeCount: function (a, b) {
      // console.log(a,b);   //a是value的新值，b是旧值
      this.getData();
    },
  },
  mounted() {
    setTimeout(() => {
      this.initChart();
      // this.getData();
      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 20);
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const initOption = {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['出料方数', '合格', '不合格', '合格率'],

          top: '0%',
          textStyle: {
            color: "rgba(0, 117, 255, 1)",
            fontSize: 12
          },
          itemWidth: 20,
          itemHeight: 8,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: ['C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60'],
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 117, 255, 1)'

            }
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            textStyle: {
              color: "rgba(197, 227, 255, 1)",
              fontSize: 12
            }
          },
        },

        yAxis: [{
          type: 'value',
          axisLine: {
            show: false,

          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 117, 255, 1)",
              fontSize: "12"
            }
          },
          axisLine: {
            lineStyle: {
              color: '#cdd5e2',
              fontSize: "18"
            }
          },
        },
        {
          type: "value",
          name: "",
          min: 0,
          max: 100,
          nameTextStyle: {
            color: "rgba(0, 117, 255, 1)"
          },
          position: "right",
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "rgba(0, 117, 255, 1)",
              fontSize: 12
            }
          }
        }
        ],
        series: [{
          name: '出料方数',
          type: 'bar',
          barWidth: '10px',

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 98, 255, 0.7000)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 98, 255, 0.1000)", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          data: [400, 400, 300, 300, 300, 400, 400, 400, 300, 200, 450]
        },
        {
          name: '合格',
          type: 'bar',
          barWidth: '10px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(27, 201, 138, 0.7000)'
              }, {
                offset: 1,
                color: 'rgba(27, 201, 138, 0.1000)'
              }]),

            }

          },
          data: [400, 500, 500, 500, 500, 400, 400, 500, 500, 180, 333]
        },
        {
          name: '不合格',
          type: 'bar',
          barWidth: '10px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(241, 177, 68, 0.7000)'
              }, {
                offset: 1,
                color: 'rgba(241, 177, 68, 0.1000)'
              }]),

            }
          },
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 200, 190]
        }, {
          name: "合格率",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: false, //平滑曲线显示

          symbol: "circle", //标记的图形为实心圆
          symbolSize: 4, //标记的大小
          itemStyle: {
            normal: {
              color: 'rgba(80, 252, 115, 1)',
              borderColor: 'rgba(80, 252, 115, 1)', //圆点透明 边框
              borderWidth: 5
            },

          },
          lineStyle: {
            color: "rgba(80, 252, 115, 1)"
          },

          data: [42, 38, 48, 35, 29, 28, 30, 85, 70, 62]
        }
        ]
      };
      this.chartInstance.setOption(initOption);
    },
    getData() {
      // console.log(this.termWorkAgeCount);
      // this.allData=this.termWorkAgeCount
      this.allData = {
        param3: 20, param2: 10, param1: 20
      }
      this.updateChart(this.allData)
    },
    // 更新图表
    updateChart(data) {

      var dataOption = {
        series: {
          data: [
            { value: data.param3, name: "2年以下" },
            { value: data.param2, name: "2~5年" },
            { value: data.param1, name: "5年以上" },
          ],
        }
      };

      // var current = -1;
      // var dataLen1 = dataOption.series[0].data.length;
      // setInterval(() => {
      //   // 取消之前高亮的图形
      //   this.chartInstance.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //     dataIndex: current,
      //   });
      //   current = (current + 1) % dataLen1;
      //   // 高亮当前图形
      //   this.chartInstance.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     dataIndex: current,
      //   });
      //   // 显示 tooltip
      //   this.chartInstance.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: current,
      //   });
      // }, 2000);
      this.chartInstance.setOption(dataOption);
    },

    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3;
      // console.log(titleFontSize);
      //   和分辨率大小相关的配置项
    const adapterOption = {
        legend: {

          textStyle: {

            fontSize: titleFontSize / 2.213
          },
          itemWidth: titleFontSize / 1.2078,
          itemHeight: titleFontSize / 3.0195,
          itemGap: titleFontSize * 1.0349
        },
        xAxis: {


          axisLabel: {
            textStyle: {

              fontSize: titleFontSize / 2.213
            }
          },
        },

        yAxis: [{

          axisLabel: {
            textStyle: {

              fontSize: titleFontSize / 2.213
            }
          },
          axisLine: {
            lineStyle: {

              fontSize: titleFontSize / 1.342
            }
          },
        },
        {




          axisLabel: {


            textStyle: {

              fontSize: titleFontSize / 2.213
            }
          }
        }
        ],
        series: [{

          barWidth: titleFontSize / 2.4156



        },
        {

          barWidth: titleFontSize / 2.4156

        },
        {


          barWidth: titleFontSize / 2.4156


        }, {




          symbolSize: titleFontSize / 6.039, //标记的大小



        }
        ]
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
